<!DOCTYPE html>
<html lang="en">

<head>
  {% include 't_head.html' %}
  <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
          integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous">
  </script>
</head>

<body>
  <div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    {% include 't_sidebar.html' %}

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <!-- Navbar -->
      {% include 't_navbar.html' %}

      <!-- 2 textarea side by side -->
      <div class="container-fluid">
        <br>


        <div class="row">
          <div class="col-sm-12">
            <h2>Check Console Output&nbsp;&nbsp;🖥</h2>
          </div>

        </div> <!-- row -->
        <div class="border-top my-3"></div>

        <br>
        <div class="row">
          <div class="col-sm-6">
            <h3 align=center>Calls Stack Hooked methods</h3>
            <textarea id=calls_stack name=console_output
              class="form-control">{{ called_console_output_str|safe }}</textarea>
          </div>

          <div class="col-sm-6">
            <h3 align=center>I/O Hooked methods</h3>
            <textarea id=hooks_stack name=console_output
              class="form-control">{{ hooked_console_output_str|safe }}</textarea>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-sm-12">
            <h3 align=center>Global Console Output</h3>
            <textarea id=global_console_output name=console_output
              class="form-control">{{ global_console_output_str|safe }}</textarea>
          </div>
        </div> <!-- row -->

      </div>
    </div>
    <!-- /#container-fluid -->

  </div>
  <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Javascript loading -->
  {% include 't_js_script.html' %}

  {% block scripts %}
  <script>
    // Console Output TAB
        var calls_stack_editor = CodeMirror.fromTextArea(calls_stack, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            readOnly: true
        });
        calls_stack_editor.setSize("100%",620);
    
        var hooks_stack_editor = CodeMirror.fromTextArea(hooks_stack, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            readOnly: true
        });
        hooks_stack_editor.setSize("100%",620);
    
        var global_console_editor = CodeMirror.fromTextArea(global_console_output, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula',
            readOnly: true
        });
        global_console_editor.setSize("100%",300);
  </script>


  <script>

    //Set cursors always at the bottom 
    global_console_editor.setCursor(global_console_editor.lineCount(), 0)
    hooks_stack_editor.setCursor(hooks_stack_editor.lineCount(), 0)
    calls_stack_editor.setCursor(calls_stack_editor.lineCount(), 0)

    const socket = io.connect('//' + document.domain + ':' + location.port + '/console');
    socket.on('calls_stack', function(msg) {
        if(msg.data.length) {
          calls_stack_editor.setValue(calls_stack_editor.getValue()+msg.data);
          calls_stack_editor.setCursor(calls_stack_editor.lineCount(), 0)
        }
    });
    socket.on('hooks_stack', function(msg) {
        if(msg.data.length) {
          hooks_stack_editor.setValue(hooks_stack_editor.getValue()+msg.data);
          hooks_stack_editor.setCursor(hooks_stack_editor.lineCount(), 0)
        }
    });

    socket.on('global_console', function(msg) {
        if(msg.data.length) {
          global_console_editor.setValue(global_console_editor.getValue()+msg.data);
          global_console_editor.setCursor(global_console_editor.lineCount(), 0)
        }
    });


  </script>
  {% endblock %}

</body>

</html>